<template>
  <div id="radar">
    <v-chart :options="options" />
  </div>
</template>

<script>
import * as echarts from "echarts/core";
import { RadarChart } from "echarts/charts";
import { RadarComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import ECharts from "vue-echarts";
import axios from "axios";

echarts.use([RadarComponent, RadarChart, CanvasRenderer]);

export default {
  name: "CourseRadar",
  props: {
    courseId: String,
  },
  components: {
    "v-chart": ECharts,
  },
  data() {
    return {
      indicator: [
        { name: "课程热度", max: 2, splitNumber: 4 },
        { name: "课程盈利情况", max: 1, splitNumber: 4 },
        { name: "课程活跃度", max: 2, splitNumber: 4 },
        { name: "课程难度", max: 1, splitNumber: 4 },
        { name: "课程评分", max: 2, splitNumber: 4 },
        { name: "课程推荐指数", max: 1, splitNumber: 4 },
        { name: "课程完成率", max: 1, splitNumber: 4 },
      ],
      value: [],
      options: {
        title: {
          text: "课程指标",
        },
        radar: {
          shape: "circle",
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#bbb",
              borderRadius: 5,
              padding: [3, 3],
            },
          },
          indicator: [],
        },
        series: [
          {
            name: "课程指标",
            type: "radar",
            lineStyle: {
              width: 3,
              shadowColor: "rgba(0, 0, 0, 0,3)",
              color: "#87CEEB",
            },
            data: [
              {
                value: [],
                name: "课程指标",
                areaStyle: {
                  opacity: 0.3,
                  shadowColor: "rgba(0, 0, 0, 0.1)",
                  color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                    {
                      color: "#B8D3E4",
                      offset: 0,
                    },
                    {
                      color: "#72ACD1",
                      offset: 1,
                    },
                  ]),
                },
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    init() {
      this.getRadarData();
    },

    getRadarData() {
      axios
        .get(`http://localhost:8080/Course/radar?courseId=${this.courseId}`)
        .then((res) => {
          this.value.push(res.data.activity);
          this.value.push(Math.log(res.data.profit) / 16);
          this.value.push(res.data.popularity);
          this.value.push(res.data.difficulty);
          this.value.push(
            this.value[0] * 0.33 + this.value[2] * 0.33 + this.value[3] * 0.33
          );
          this.value.push(
            this.value[1] * 0.5 + this.value[2] * 0.25 + this.value[3] * 0.25
          );
          this.value.push(1 - 0.5 * this.value[3]);

          this.options.radar.indicator = this.indicator;
          this.options.series[0].data[0].value = this.value;
          let radar = echarts.init(document.getElementById("radar"));
          radar.setOption(this.options);
        });
    },
  },

  beforeMount() {
    this.init();
  },
};
</script>

<style scoped>
#radar {
  display: flex;
  flex: 1;
  width: 30vw;
  height: 45vh;
  margin: 1% 0 0 1%;
  background-color: whitesmoke;
}
</style>
